<template>
	<view class="wc-lottery-drawing flex-center">
		<view class="wc-lottery-drawing-mask"  ></view>
		<view class="box flex-center row-around">
			<image
				class="wc-lottery-item-image"
				mode="aspectFill"
				src="@/static/img/lottery/lottery_item_bg1.png"
			></image>
			<view class="close flex-center" @click="close">
				<text>X</text>
			</view>
			<view class="box-header" >
				
			</view>
			<view class="box-content">
				
				<text v-if="isEmpty" style="font-size: 24px;color: #FF341F;">{{ content }}</text>
				<view class="box-money" v-else>
					<text class="box-money-unit">￥</text>
					<text class="box-money-value">{{ text }}</text>
				</view>
				<text class="text-center" >获得的福利在“钱包”中查看</text>
			</view>
			<view class="box-footer">
				<button 
					size="mini"
					class="wc-lottery-drawing-btn"
					hover-class="is-hover"
					@click="gotoPage"
				>去钱包看看</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const emptyText = '谢谢惠顾'
	// import price from " components/price/price.vue"
	export default {
		name: "LotteryDrawing",
		components: {
			// price
		},
		props: {
			text: {
				type: String | Number,
				default: '22'
			}
		},
		computed: {
			
			isEmpty(v) {
				if (!this.text || this.text === '0' || this.text === emptyText) {
					return true
				}
				return false
			},
			content() {
				if (!this.text || this.text === '0') {
					return emptyText
				}
				return this.text
			},
			
		},
		data() {
			return {
				
			};
		},
		methods: {
			close() {
				this.$emit('close')
			},
			gotoPage() {
				
				uni.navigateTo({
					url: '/bundle/pages/user_wallet/user_wallet'
				})
				
			}
			
		}
	}
</script>

<style >

.wc-lottery-drawing {
	position: fixed;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 100%;
	
}


.box {
	position:relative;
	width: 430rpx;
	height: 458rpx;
	background-image: url('@/static/img/lottery/lottery_item_bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
	animation-name: box;
	animation-duration: 2s;
	
}
.wc-lottery-item-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 430rpx;
	height: 458rpx;
	border-radius: 20rpx;
	overflow: hidden;
	z-index: 10;
}
.close {
	position: absolute;
	right: 40rpx;
	top: 40rpx;
	width: 45rpx;
	height: 45rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 50%;
	opacity: 1;
	z-index: 12;
}

.box-content {
	width: 430rpx;
	height: 214rpx;
	text-align: center;
}
.box-money {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.box-money-unit {
	font-size: 30px;
	color: #FF341F;
	margin-top: 15rpx;
}
.box-money-value {
	font-size: 60rpx;
	color: #FF341F;
}
.text-center {
	font-size: 18rpx;
	color: #FF341F;
}
.box-footer{

}
.wc-lottery-drawing-btn {
	width: 236rpx;
	padding: 0;
	padding: 15rpx;
	margin-top: 10rpx;
	font-size: 30rpx;
	line-height: 1;
	
	font-weight: 500;
	border-radius: 30rpx;
	color: #FF341F;
	background: #FBE945;
}

@keyframes box {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
</style>
